import { useEffect, useRef, useState } from "react";
import Child from "./components/Child";
/* 
  初始渲染： App() { count=4  effect回调() {} }
  更新渲染： App() {count=6}
*/
export default function App() {

  const inputRef = useRef()
  const [content, setContent] = useState('')
  
  const [msg, setMsg] = useState('abc')
  const [count, setCount] = useState(4)
  console.log(count)
  /* 
  useEffect(() => { // didMount

    return () => { // WillUnmount
      
    }
  }, []): 
  useEffect(() => {}, [count]): // didMount + count更新的didUpdate
  useEffect(() => {}): // didMount + didUpdate
  */

  useEffect(() => {
    // 每隔一秒count增加2
    const intervalId = setInterval(() => {
      console.log('-----', count)
      // setCount(count + 2)  // 只能看到初始调用产生初始状态count值
      setCount(val => val + 2)
    }, 1000);

    return () => {
      clearInterval(intervalId)
    }
  }, [])

  return (
    <div>
      <p>msg: {msg}</p>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 3)}>增加</button><br />
      <input type="text" ref={inputRef}/>
      <button onClick={() => alert(inputRef.current.value)}>提示输入</button>   
      <br />
      <input type="text" value={content} onChange={event => setContent(event.target.value)}/>  
      <button onClick={() => alert(content)}>提示输入2</button>   
      <hr />
      <Child count={count} setCount={setCount}/>
    </div>
  )
}